<template>
    <div>
        <h1>商品销售情况</h1>
        <el-dropdown @command="getcommand">
            <el-button type="primary" >
                {{value}}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>选择门店
            <el-dropdown-menu>
                <el-dropdown-item :command="item" :key="item._id" v-for="item in option">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <div class="content">
                <h3>完成进度:<el-progress :text-inside="true" :stroke-width="30" :percentage="salesnum"></el-progress></h3>
                <h3>已售出:{{salesnum}}件商品</h3>
                <h3>目标:<el-progress :text-inside="true" :stroke-width="30" :percentage="target"></el-progress></h3>
                <h3>目标售出:{{target}}件商品</h3>
                <h3>剩余进度:<el-progress :text-inside="true" :stroke-width="30" :percentage="remaining"></el-progress></h3>
                <h3>剩余:{{remaining}}件商品</h3>
        </div>

    </div>
</template>

<script>
import commoditysalesApi from "../../services/commoditysales";
export default {
  data() {
    return {
      option:"",
      value:"请选择",
      salesnum:0, //完成进度
      target:0, //完成目标
      remaining:0 //剩余进度
    };
  },
  async created() {
    const data = await commoditysalesApi.getcommoditysales();
    this.option = data.data;
  },
  methods: {
      getcommand(command){
          this.value = command.name;
          this.salesnum = command.salesnum;
          this.target = command.target;
          this.remaining = command.target - command.salesnum;
      }
  }
};
</script>

<style scoped>
.el-progress{
    margin-top: 30px;
}

</style>
